<template>
  <el-dialog :visible.sync="visible"
             :title="codeConfigInfo.name"
             width="70%"
             :before-close="modalClose">
    <el-row>
      <!-- <el-col :span="20"
              prop="baseAreaCode">
        <label>全国统一编码：</label>
        <el-input class="w-200"
                  type="text"
                  v-model="addForm.baseAreaCode"
                  show-word-limit
                  placeholder="请输入全国统一编码">

        </el-input>
      </el-col> -->
      <el-col :span="4">
        <el-button type="primary"
                   size="mini"
                   @click="handleAdd">新增省市编码</el-button>
      </el-col>
    </el-row>

    <el-form :model="addForm"
             ref="addForm"
             label-width="100px"
             class="mt-20">
      <div class="mt-20">
        <div v-for="(item, index) in addForm.areaCodeDtos"
             :key="item.key"
             class="box-wrapper mt-20">
          <el-row>
            <el-col :span="7">
              <el-form-item label="选择省:"
                            :prop="'areaCodeDtos.' + index + '.baseAreaId'">
                <el-select v-model="item.baseAreaId"
                           filterable
                           :disabled="item.isShowProvince"
                           placeholder="请选择省"
                           @change="handleVal(item, index)">
                  <el-option v-for="item in provinceList"
                             :label="item.name"
                             :value="item.id"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="省统一编码:"
                            :prop="'areaCodeDtos.' + index + '.baseAreaCode'">
                <el-input class="w-200"
                          type="text"
                          v-model="item.baseAreaCode"
                          show-word-limit
                          placeholder="请输省入统一编码">

                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="三级医院收费:"
                            :prop="'areaCodeDtos.' + index + '.charge'">
                <el-input class="w-200"
                          type="text"
                          v-model="item.tertiaryHospitalFee"
                          placeholder="请输三级医院收费">

                </el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="3">
              <el-button type="primary"
                         @click="handleAdd"
                         class="el-icon-plus">新增省市编码</el-button>
            </el-col> -->
            <el-col :span="3">
              <el-button type="danger"
                         class="el-icon-delete del-btn"
                         @click="removeForm(item)">删除</el-button>
            </el-col>
          </el-row>

          <ul class="city-box">
            <li v-for="list in item.areaCodeDtos"
                :key="list.baseAreaId"
                class="city-item">
              <div>
                <label style="min-width:100px;">{{list.name}}:</label>
                <el-input v-model="list.baseAreaCode"
                          type="text"
                          v-if="list.isShow"
                          :placeholder="`请输入${list.name}统一编码`"
                          class="w-200"></el-input>
                <el-input v-model="list.tertiaryHospitalFee"
                          type="text"
                          v-if="list.isShow"
                          :placeholder="`${list.name}收费`"
                          style="width: 100px"></el-input>
              </div>
            </li>
          </ul>
        </div>
        <el-form-item>
          <div class="mt-20 submit-btn">
            <el-button type="primary"
                       @click="submitForm('addForm')">提交</el-button>
            <el-button @click="modalClose">取消</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>

</template>
<script>
export default {
  name: 'codeConfig',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    codeConfigInfo: {
      type: Object,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: false,
      addForm: {
        baseAreaCode: '', // 全国统一编码
        tertiaryHospitalFee:'',//三级医院收费标准
        areaCodeDtos: [
          {
            baseAreaId: '', // 省ID
            baseAreaCode: '', // 省统一编码
            tertiaryHospitalFee:'',//三级医院收费标准
            areaCodeDtos: [
              {
                baseAreaId: '', // 市ID
                baseAreaCode: '', // 市统一编码
                tertiaryHospitalFee:'',//三级医院收费标准
              }
            ]
          }
        ]
      },
      provinceList: [],
      isShow: false,
      isShowProvince: false
    }
  },
  methods: {
    // 关闭弹出框
    modalClose () {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    // 提交事件
    submitForm (formName) {
      /* if (this.addForm.baseAreaCode === '') {
        this.$message.error('请填写全国统一编码')
        return
      } */
      let res = this.addForm.areaCodeDtos
      if (res.length > 0) {
        let item = res[res.length - 1]
        if (item.baseAreaId === '') {
          this.$message.error('请选择省');
          return
        }
        if (item.baseAreaCode === '') {
          this.$message.error('请填写省统一编码');
          return
        }
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          /* this.addForm.areaCodeDtos.map(item => {
            item.areaCodeDtos = item.areaCodeDtos.filter(e => e.baseAreaCode != '')
            return item
          }); */
          const { data: res } = await this.post(this.api.codeConfig.updateDeviceChargeCode, {
            id: '',
            deviceId: this.codeConfigInfo.id,
            ...this.addForm
          })

          if (res.code === '200') {
            this.$message.success('保存成功')
            this.modalClose()
          } else {
            this.$message.error(res.message)
          }
        }
      });
    },
    // 重置事件
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 添加表单项事件
    handleAdd () {
      this.getChildrenArea()
      let res = this.addForm.areaCodeDtos
      if (res.length > 0) {
        let item = res[res.length - 1]
        if (item.baseAreaId === '') {
          this.$message.error('请选择省');
          return
        }
        if (item.baseAreaCode === '') {
          this.$message.error('请填写省统一编码');
          return
        }
        this.addForm.areaCodeDtos.push({
          baseAreaId: '',
          baseAreaCode: '',
          areaCodeDtos: [
            {
              baseAreaId: '', // 市ID
              baseAreaCode: '' // 市统一编码
            }
          ],
        });
      } else {
        this.addForm.areaCodeDtos.push({
          baseAreaId: '',
          baseAreaCode: '',
          areaCodeDtos: [
            {
              baseAreaId: '', // 市ID
              baseAreaCode: '' // 市统一编码
            }
          ],
        });
      }

    },
    // 移除表单项事件
    removeForm (item) {
      var index = this.addForm.areaCodeDtos.indexOf(item)
      if (index !== -1) {
        this.addForm.areaCodeDtos.splice(index, 1)
      }
    },

    // 选择省
    async getChildrenArea () {
      const { data: res } = await this.post(this.api.codeConfig.getChildrenArea, {
        id: 0
      })
      if (res.code === '200') {
        this.provinceList = res.object
      } else {
        this.$message.error(res.message)
      }
    },
    // 下拉
    async handleVal (item, index) {
      const { data: res } = await this.post(this.api.codeConfig.getChildrenArea, {
        id: item.baseAreaId
      })
      if (res.code === '200') {
        this.addForm.areaCodeDtos[index].baseAreaId = item.baseAreaId
        this.addForm.areaCodeDtos[index].areaCodeDtos = res.object.map(({
          id,
          name
        }) => ({
          baseAreaId: id,
          name,
          isShow: true,
          baseAreaCode: ''
        }))

      } else {
        this.$message.error(res.message)
      }

    },
    // 详情
    async getDeviceChargeCode () {
      const { data: res } = await this.post(this.api.codeConfig.getDeviceChargeCode, {
        deviceId: this.codeConfigInfo.id
      })
      if (res.code === '200') {
        // 无详情 则是添加, true 则是详情
        if (res.object) {
          let resData = res.object
          this.addForm = resData
          this.addForm.areaCodeDtos.map(item => {
            item.isShowProvince = true
            item.areaCodeDtos.forEach(e => {
              e.isShow = true
              e['name'] = e.areaName
            })
          });
        } else {
          // this.$message.error(`请添加 [${this.codeConfigInfo.name}] 全国统一编码`)
        }
      } else {
        this.$message.error(res.message)
      }
    }
  },
  created () {
    this.getChildrenArea() // 添加
    this.getDeviceChargeCode() // 详情

  }
}
</script>
<style scoped lang="scss">
.box-wrapper {
  padding: 20px 0;
  min-height: 150px;
  border: 1px solid #dcdfe6;
  .del-btn {
    margin-left: 20px;
    span {
      padding-left: 5px;
    }
  }
}
.city-box {
  display: flex;
  flex-wrap: wrap;
  .city-item {
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin-bottom: 10px;
    p {
      text-align: right;
      label {
        display: inline-block;
        margin-right: 10px;
        min-width: 100px;
      }
    }
  }
}
.submit-btn {
  text-align: center;
}
ul,
li {
  list-style-type: none;
}
</style>
